<template>
  <div class="message-warp" ref="wrapper">
    <div>
      <div class="messageBox" v-for="item in data" :key="item.mailBoxId">
        <div :class="{'left' : !item.isSend,'right': item.isSend}">
          <div class="infocontent" v-html="item.context.replace(/\n/g, '<br>')"></div>
          <div class="time">{{item.ctime | formatDate}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { formatDate } from "assets/js/date";
import BScroll from "better-scroll";
const ERR_OK = 200;
export default {
  data() {
    return {
      data: "",
      top: 0
    };
  },
  filters: {
    // 时间过滤
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    }
  },
  methods: {
    _BScrolls() {
      // 添加滚动条
      let BScrolls = new BScroll(this.$refs.wrapper, {
        probeType: 3,
        click: true,
        type: Boolean,
        default: false
      });
      // 滚到最底部
      BScrolls.scrollTo(this.top, BScrolls.maxScrollY);
    },
    // 加载数据
    emailAddress(item) {
      this.$ajax
        .get(
           this.GLOBAL.warrantyService  +
            "/sendMail/getMailByBoxEmail?emailAddress=" +
            item.emailAddress + '&businessName=' + this.$route.name.substring(0,2)
        )
        .then(res => {
          if(res.data.code === ERR_OK){
            this.data = res.data.data;
            this.information(this.data);
            this.$nextTick(() => {
              this._BScrolls();
            }); 
          }
        });
    },
    // 判断是否回复
    information(item) {
      if (item.length > 0) {
        for (let i in item) {
          if (item[i].isSend === true) {
            this.$emit('isSend',false)
            break;
          }
        }
      } else {
        this.$emit('isSend',true)
      }
    }
  },
  watch: {}
};
</script>

<style lang="stylus" scoped>
.message-warp {
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  bottom: 0;
  overflow: hidden;

  .messageBox {
    padding: 10px 0;
    overflow: auto;

    .infocontent {
      line-height: 24px;
      font-size: 16px;
      color: #fff;
      background: #42a1ff;
      padding: 10PX;
      border-radius: 10px;
    }

    .time {
      font-size: 12px;
      color: #666;
      padding: 5px;
    }

    .left {
      float: left;
      max-width: 500px;
    }

    .right {
      float: right;
      max-width: 700px;

      .time {
        text-align: right;
      }
    }
  }
}
</style>

